<!-- 每日总结 -->
<template>
	<view>
		<view>
			<view style="margin: 30rpx;display: flex;justify-content: space-between;">
				<view @click="show1=true" style="background-color:#0070D9;color: white; border-radius: 5rpx; padding: 15rpx;">上传今日总结</view>
				<view @click="show2=true">排行榜</view>
			</view>

			<!-- 新增今日总结 -->
			<u-popup :show="show1" @close="show1=false" @open="open1">
				<view style="height: 800rpx;">
					<view style=" margin: 30rpx;">
						<text style="margin-top: 10rpx; color: gray;">标题：</text>
						<view style="height: 10rpx;"></view>
						<u--input placeholder="请输入标题" border="surround" v-model="info.company"></u--input>
					</view>

					<view style=" margin: 30rpx;">
						<text style="margin-top: 10rpx; color: gray;">工作总结：</text>
						<view style="height: 10rpx;"></view>
						<view style="border-radius: 10rpx;border: 1rpx solid gray;">
							<textarea rows="8" cols="80" style="margin:10rpx; width: 95%;"></textarea>
						</view>
					</view>

					<button
						style="background-color: black;border-radius: 10rpx;color: white;margin: 50rpx;margin-top: 20rpx;">提交</button>
				</view>
			</u-popup>



			<!-- 排行榜 -->
			<u-popup :show="show2" @close="show2=false" @open="open1">
				<u-subsection :list="list1" :current="current" @change="change1"></u-subsection>
				<view style="height: 1000rpx;">
					<view style="height: 20rpx;color: gray;display: flex;justify-content: space-between;margin: 30rpx;">
						<view style="flex: 1;">排名</view>
						<view style="flex: 1;margin-right: 20rpx;">姓名</view>
						<view style="">分数</view>
					</view>
					<!-- 已添加零件 -->
					<view style="display: flex;flex-wrap: wrap; margin: 20rpx;">


					</view>
					<view style="height: 90%; overflow-y: scroll; background-color: #f1f1f1;">
						<view
							style="height: 40rpx;padding: 20rpx;background-color: white; border-radius: 10rpx; display: flex;justify-content: space-between;margin: 30rpx;">
							<view>1</view>
							<view>MP</view>
							<view style="color: #0070D9;font-weight: bold;">43</view>
						</view>

						<view
							style="height: 40rpx;padding: 20rpx;background-color: white; border-radius: 10rpx; display: flex;justify-content: space-between;margin: 30rpx;">
							<view>2</view>
							<view>MP</view>
							<view style="color: #0070D9;font-weight: bold;">42</view>
						</view>

					</view>
				</view>
			</u-popup>


			<!-- 评分 -->
			<u-popup :show="show3" @close="show3=false" @open="open1">
				<view style="height: 800rpx;">
					<view style=" margin: 30rpx;">
						<text style="margin-top: 10rpx; color: gray;">评分：</text>
						<view style="height: 10rpx;"></view>
						<view style="display: flex;">
							<image :src="init.img" style="width: 60rpx;height: 60rpx;" v-for="(init,index) in xxInfo"
								@click="pf(index)"></image>
						</view>
					</view>

					<view style=" margin: 30rpx;">
						<text style="margin-top: 10rpx; color: gray;">工作总结：</text>
						<view style="height: 10rpx;"></view>
						<view style="border-radius: 10rpx;border: 1rpx solid gray;">
							<textarea rows="8" cols="80" style="margin:10rpx; width: 95%;" disabled="true"></textarea>
						</view>
					</view>
					<button
						style="background-color: black;border-radius: 10rpx;color: white;margin: 50rpx;margin-top: 20rpx;">提交评分</button>
				</view>
			</u-popup>



			<!-- 新增供应商 -->
			<view style="height: 1300rpx;">
				<view style="height: 40rpx;color: gray;display: flex;justify-content: space-between;margin: 30rpx;">
					<view style="flex: 3;">日期</view>
					<view style="flex: 1;margin-right: 20rpx;">姓名</view>
					<view style="">功能</view>
				</view>
				<!-- 已添加零件 -->
				<view style="display: flex;flex-wrap: wrap; margin: 20rpx;">


				</view>
				<view style="height: 90%; overflow-y: scroll;">

					<view
						style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>2024-04-11 11:24:25</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;" @click="pfen()">评分</view>
					</view>


					<view
						style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">评分</view>
					</view>


					<view
						style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">评分</view>
					</view>
					<view
						style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">评分</view>
					</view>

					<view
						style="height: 40rpx;padding: 20rpx; border: 1rpx solid #0070D9;display: flex;justify-content: space-between;margin: 30rpx;">
						<view>键盘</view>
						<view>MP</view>
						<view style="color: #0070D9;font-weight: bold;">评分</view>
					</view>

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//星星
				xxInfo: [{
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}, {
					img: "../../static/xx.png"
				}],
				show1: false,
				show2: false,
				show3: false,
				list1: ['昨天', '3天内', '7天内', "30天内"],
				current: 0,
			};
		},
		methods: {
			//点击分段器
			change1(e) {
				this.current = e
			},
			//评分
			pfen() {
				this.show3 = true
			},
			//评分星星点亮
			pf(i) {
				i = i+1
				for (var j = 0; j < this.xxInfo.length; j++) {
					this.xxInfo[j].img = "../../static/xx.png"
				}
				for (var j = 0; j < i; j++) {
					this.xxInfo[j].img = "../../static/xx1.png"
				}
			},
		}
	}
</script>

<style lang="less">

</style>